<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单树形列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${basePath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${basePath}/css/public.css" media="all">
    <link rel="stylesheet" href="${basePath}/tools/zTree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${basePath}/tools/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${basePath}/tools/zTree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${basePath}/tools/zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${basePath}/tools/zTree/js/jquery.ztree.excheck.js"></script>
    <style>
        body {
            background-color: #ffffff;
        }
        h4{ font-size:18px;font-family:"Microsoft YaHei","Simsun",Arial; font-weight:normal; line-height:1; padding:0; margin:0;}
        .section{ padding:20px;}
        .section h4 span{ color:#0084e9;}
        .ztree *{
            padding: 0;
            margin: 0;
            font-size: 18px;/* 每个节点的字体大小 */
            font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif
        }

        .ztree {
            margin: 0;
            padding: 5px;
            color: #333
        }

        .ztree li {
            padding: 0;
            margin: 0;
            list-style: none;
            line-height:28px;/* 每个节点的行间距 */
            text-align: left;
            white-space: nowrap;
            outline: 0
        }

        .ztree li ul {
            margin: 0;
            padding: 0 0 0 18px
        }
        .ztree li a {
            padding: 1px 3px 0 0;
            margin: 0;
            cursor: pointer;
            height: 17px;
            color: #333;
            background-color: transparent;
            text-decoration: none;
            vertical-align: top;
            display: inline-block
        }

        .ztree li a:hover {
            text-decoration: underline
        }

        .ztree li a.curSelectedNode { /* 选中节点的背景色*/
            padding-top: 0px;
            background-color: #FFE6B0;
            color: black;
            height: 32px;
            border: 1px #FFB951 solid;
            opacity: 0.8;
        }

        .ztree li a.curSelectedNode_Edit {
            padding-top: 0px;
            background-color: #FFE6B0;
            color: black;
            height: 16px;
            border: 1px #FFB951 solid;
            opacity: 0.8;
        }


    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="section">
            <h4><span>菜单树</span></h4>
            <hr>
            <div class="zTreeDemoBackground">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <hr>
            <div>
                <button class="layui-btn layui-btn-normal" onclick="submitBtn()">提交</button>
            </div>
        </div>

    </div>
</div>
</div>

<script src="${basePath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    //所有选中的菜单ID
    var menuIds='${menuIds}';
    var menuTreeTest=${menuTree};
    /*
    checkbox点击事件
     */
    var onCheck = function(event, treeId, treeNode){
        if(treeNode.checked){//选中
            if(menuIds==null || menuIds===''){
                menuIds=treeNode.id;
            }else{
                menuIds+=","+treeNode.id;
            }
        }else{//取消选中
            //获取当前点击的菜单ID  1，2，3，4
            var menuId=","+treeNode.id;
            //判断父节点是否为第一个
            if(menuIds.search(menuId) !== -1){//如果menuIds中包含当前操作菜单的ID则返回值不为-1
                menuIds=menuIds.replace(menuId, "");
            }else{//为第一个菜单的话前面没有“，”，后面有“，”
                menuIds=menuIds.replace(treeNode.id+"," , "");
            }
        }

    }
    /**
     * 提交
     */
    var submitBtn = function(){
        var roleId = '${roleId}';
        $.ajax({
            url:'${basePath}/menu/setMenus',
            type:'post',
            data:{'menuIds':menuIds,'roleId':roleId},
            dataType:'json',
            success:function (data){
                if(data.code===0){
                    //设置成功
                    layer.msg(data.msg,function (){
                        parent.window.location.reload();
                    });
                }else{
                    layer.alert(data.msg);
                }
            }
        })
    }

    $(function(){
        //定义树是设置相关属性
        var setting = {
            view:{
                showIcon:false,
                txtSelectedEnable: true
            },
            check: {
                enable:true,
                chkStyle:"checkbox",//或者radio
            },
            data: {
                simpleData: {
                    enable: true,
                }
            },
            //回调函数
            callback: {
                onCheck:onCheck
            }
        };


        //初始化zTree
        $.fn.zTree.init($("#treeDemo"),setting,${menuTree});
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //将已选择的菜单默认选中
        var menu = '${menuIds}';
        var list = menu.split(',');
        for(var i = 0;i<list.length;i++){
            var node = zTree.getNodeByParam("id",list[i]);
            //将checkbox选中
            zTree.checkNode(node, true, true);
        }


    })

</script>
</body>
</html>